<template>
    <div class="hello content">
       <div class="l">
          我是父组件
          <el-button type="success">默认值{{parentMsg}}</el-button>
          <el-input v-model="input" placeholder="" clearable />
          <el-button type="primary" @click='editinput'>修改</el-button>
          <br>
          父组件调用子组件的方法
          <el-button type="primary" @click='handSonFn'>调用</el-button>
       </div>
       <div class="r">
        我是子组件
        <Child :info="parentMsg" @changeInput="changeInputFn" ref="sonref"></Child>
       </div>
    </div>
  </template>
   
  <script setup>
  import Child from './son-father.vue'
  import {ref} from 'vue'
  const parentMsg=ref('11111111111')
   const sonref =   ref(null)

  const input=ref('')
  const editinput=()=>{
    parentMsg.value=input.value
  }


  //子组件调用
  const changeInputFn =()=>{
    parentMsg.value=Math.random(10)
  }


  //父组件调用子组件方法
  const handSonFn=()=>{
    sonref.value.editval()
  }
  </script>
   
  <style scoped>
   .hello{
    display: flex;
   }
   .l{
    flex: 1;
   }
   .r{
    flex: 1;
   }
  </style>